import React from 'react';
import { inject, observer } from 'mobx-react';
import classnames from 'classnames';
import { Checkbox } from 'antd';
import FrameContentRender from 'components/motionsRender/components/frameContentRender';
import ScrollArea from 'components/scrollArea';
import Icon from 'components/icon';
import css from './index.less';

@inject('store')
@observer
class Left extends React.Component {

  constructor() {
    super();
    this.state = {
      scrollHeight: 600,
    };
  }

  preview() {
    const { temporaryMotions } = this.props.store.project.currentPages.current;
    temporaryMotions.update('preview', true);
  }

  newMotion() {
    // temporaryMotions 动效树
    const { temporaryMotions } = this.props.store.project.currentPages.current;
    // console.log(temporaryMotions);
    // 选中帧
    const { current } = temporaryMotions.current;
    temporaryMotions.addNewMotion(current);
  }

  delFrame(frame) {
    const { temporaryMotions } = this.props.store.project.currentPages.current;
    const motion = temporaryMotions.current;
    motion.remove(frame);
  }

  // res

  componentDidMount() {
    this.setState({
      scrollHeight: this.refs.content.offsetHeight - 70
    });
  }

  renderHead() {
    const { temporaryMotions } = this.props.store.project.currentPages.current;

    return (
      <div className={css.head}>
        {
          temporaryMotions.list.map(motion => {
            const props = {
              key: motion.id,
              className: classnames({
                [css.item]: true,
                [css.select]: motion === temporaryMotions.current
              }),
              onClick: () => {
                temporaryMotions.update('current', motion);
              }
            };
            return (
              <div {...props}>
                {motion.title}
              </div>
            );
          })
        }
        <button type="button" onClick={this.newMotion.bind(this)}>新建动效</button>
        <button type="button" onClick={this.preview.bind(this)}>预览</button>
      </div>
    );
  }

  renderContent() {
    const { temporaryMotions } = this.props.store.project.currentPages.current;
    const motion = temporaryMotions.current;

    const newProps = {
      className: css.newFrame,
      onClick: () => {
        motion.addFrame();
      }
    };

    const scrollProps = {
      className: css.scroll,
      smoothScrolling: false,
      minScrollSize: 100,
      style: {
        height: `${this.state.scrollHeight}px`
      }
    };
    return (

      <div className={css.content} ref="content">
        <div className={css.btnBox}>
          <Checkbox
            checked={motion.loop}
            onChange={e => {
              motion.update('loop', e.target.checked);
            }}
          >开启循环动画</Checkbox>
          <Checkbox
            checked={motion.autoPlay}
            onChange={e => {
              motion.update('autoPlay', e.target.checked);
            }}
          >自动播放</Checkbox>
        </div>
        <div className={css.frames}>
          <ScrollArea {...scrollProps}>
            {
              motion.list.map((item, index) => {
                const boxProps = {

                  className: classnames({
                    [css.frameBox]: true,
                    [css.select]: item === motion.current,
                  }),
                  onClick: () => {
                    motion.update('current', item);
                  }
                };
                const props = {
                  frame: item,
                  isThumb: true,
                  maxWidth: 93
                };
                return (
                  <div key={item.id}>
                    <div className={css.frameEdit}>
                      <p onClick={() => {
                        console.log('复制');
                      }}>
                        <Icon type="icon-element-copy"/>
                      </p>
                      {
                        index ?
                        <p onClick={this.delFrame.bind(this, item)}>
                          <Icon type="icon-page-delete"/>
                        </p> : null
                      }
                    </div>
                    <div {...boxProps}>
                      <FrameContentRender {...props}/>
                    </div>
                    <p className={css.title}>
                      {index ? `第${index}帧` : '初始状态'}
                    </p>
                  </div>

                );
              })
            }
            <div {...newProps}>
              新建帧
            </div>
          </ScrollArea>
        </div>
      </div>
    );
  }

  render() {

    return (
      <div className={css.layout}>
        {
          this.renderHead()
        }
        {
          this.renderContent()
        }
      </div>
    );
  }
}
export default Left;
